<script setup lang="ts">
/**
 * @description 表单或列表中的 Cell 的容器，由一个 label 和一个插槽组成。
 * 在 Section 中使用，ListCell 不显示背景颜色，背景颜色由 Section 显示。
 *
 * @property label - Cell 的 label
 */
const props = withDefaults(defineProps<{
  label?: string
  height?: string | number
}>(), {
  label: '标签',
  height: '116',
})
</script>

<template>
  <view class="w-full flex items-center justify-between px-30rpx" hover-class="bg-#F8F8F8" :style="{ height: `${props.height}rpx` }">
    <slot name="label">
      <view class="flex-shrink-0 text-28rpx text-#333333 leading-40rpx">
        {{ props.label }}
      </view>
    </slot>
    <Spacer class="flex-shrink-0" width="32" />
    <slot />
  </view>
</template>
